<template>
    <div class="accountcenter_whole">
        <panel title="管理员信息">
            <p>管理员ID：{{userInfo.account}}</p>
            <br>
            <el-divider></el-divider>
            <br>
            <p>账号：{{userInfo.id}}</p>
            <br>
            <el-divider></el-divider>
            <br>
            <p>用户组：{{userInfo.userGroup}}</p>
            <br>
            <el-divider></el-divider>
            <br>
            <p>创建时间：{{userInfo.ctime | formaDate}}</p>
            <br>
            <el-divider></el-divider>
            <br>
            <p>管理员头像：
                <el-upload
                    class="avatar-uploader"
                    :action="BASEURL + '/users/avatar_upload'"
                    :on-success="success"
                    :header="{token:'111'}"
                    :data="{desc:'上传时额外的参数'}"
                    :before-upload="beforeAvatarUpload"
                    :show-file-list="false"
                    name="file"
                    >
                    <img v-if="userInfo.imgUrl" :src="BASEURL+userInfo.imgUrl" alt="">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </p>
        </panel>
    </div>
</template>

<script>
import { userInfoReq, avatareditReq } from "../../api/account.api.js";
import { BASEURL } from "../../utils/common.js";
import dayjs from "dayjs";

export default {
  data() {
    return {
      userInfo: {},
      BASEURL
    };
  },
  methods: {
    async getUserInfo() {
      const res = await userInfoReq();
      this.userInfo = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    success(response) {
      let imgUrl = response.imgUrl.split("/").pop();
      avatareditReq(imgUrl).then(res => {
        console.log(res);
        this.getUserInfo();
        this.$bus.$emit("uploadImg");
      });
    }
  },
  created() {
    this.getUserInfo();
  },

  // 时间
  filters: {
    formaDate(date) {
      let str = dayjs(date).format("YYYY-MM-DD");
      return str;
    }
  }
};
</script>

<style lang="less" scoped>
.avatar-uploader {
  width: 140px;
  height: 140px;
  border: 1px solid #ccc;
  img {
    position: relative;
    width: 140px;
    height: 140px;
    z-index: 5;
  }
  .avatar-uploader-icon {
    position: relative;
    top: -80px;
  }
}
</style>